import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Tabs, Button, Card } from 'antd-mobile'
import { UserOutline } from 'antd-mobile-icons'
import Navbar from '../../compoents/Navbar'
import style from './index.module.css'

// 订单类型定义
interface Order {
  id: number
  service: string
  hospital: string
  applyTime: string
  amount: number
  status: 'pending' | 'approved' | 'rejected' | 'cancelled'
  statusText: string
}

// 模拟开单记录数据
const mockOrders: Order[] = [
  {
    id: 1,
    service: '动态心电图、血常规、新冠预防...',
    hospital: '四川省保健院北苑',
    applyTime: '2020-01-01 10:30:20',
    amount: 201.00,
    status: 'pending', // 待审核
    statusText: '待审核'
  },
  {
    id: 2,
    service: '动态心电图、血常规、新冠预防...',
    hospital: '四川省保健院北苑',
    applyTime: '2020-01-01 10:30:20',
    amount: 201.00,
    status: 'approved', // 已审核
    statusText: '审核通过'
  },
  {
    id: 3,
    service: '动态心电图、血常规、新冠预防...',
    hospital: '四川省保健院北苑',
    applyTime: '2020-01-01 10:30:20',
    amount: 201.00,
    status: 'rejected', // 已驳回
    statusText: '审核驳回'
  }
]

function Index() {
    const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('all')
  const [orders] = useState(mockOrders)

  // 根据状态过滤订单
  const getFilteredOrders = (status: string) => {
    if (status === 'all') return orders
    return orders.filter(order => order.status === status)
  }

  // 获取状态样式类名
  const getStatusClassName = (status: string) => {
    switch (status) {
      case 'pending':
        return style.statusPending
      case 'approved':
        return style.statusApproved
      case 'rejected':
        return style.statusRejected
      default:
        return ''
    }
  }

  // 渲染操作按钮
  const renderActionButton = (order: Order) => {
    switch (order.status) {
      case 'pending':
        return (
          <Button 
            className={style.cancelButton}
            onClick={() => console.log('取消申请', order.id)}
          >
            取消申请
          </Button>
        )
      case 'approved':
        return (
          <Button 
            className={style.payButton}
            onClick={() => navigate('/OpenPay')}
          >
            去支付
          </Button>
        )
      case 'rejected':
        return null
      default:
        return null
    }
  }

  return (
    <div className={style.container}>
      <Navbar title='开单记录' showBack onBack={() => navigate(-1)} />

        <div className={style.openLengthBox}>
        {/* 标签页 */}
        <Tabs 
          className={style.tabs}
          activeKey={activeTab}
          onChange={setActiveTab}
        >
          <Tabs.Tab title="全部" key="all">
            <div className={style.tabContent}>
              {/* 用户信息栏 */}
              <div className={style.userInfoBar}>
                <div className={style.userInfo}>
                  <UserOutline className={style.userIcon} />
                  <span className={style.userName}>王小柯</span>
                  <span className={style.userId}>2015****10</span>
                </div>
                <div className={style.switchButton}>
                  <UserOutline className={style.switchIcon} />
                  <span>切换</span>
                </div>
              </div>

              {/* 订单列表 */}
              <div className={style.orderList}>
                {getFilteredOrders('all').map(order => (
                  <Card key={order.id} className={style.orderCard}>
                    <div className={style.orderHeader}>
                      <div className={style.orderService}>{order.service}</div>
                      <div className={`${style.orderStatus} ${getStatusClassName(order.status)}`}>
                        {order.statusText}
                      </div>
                    </div>
                    
                    <div className={style.orderDetails}>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请医院：</span>
                        <span className={style.detailValue}>{order.hospital}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请时间：</span>
                        <span className={style.detailValue}>{order.applyTime}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>开单金额：</span>
                        <span className={style.detailValue}>¥{order.amount.toFixed(2)}</span>
                      </div>
                    </div>

                    {renderActionButton(order) && (
                      <div className={style.orderAction}>
                        {renderActionButton(order)}
                      </div>
                    )}
                  </Card>
                ))}
              </div>
            </div>
          </Tabs.Tab>
          
          <Tabs.Tab title="待审核" key="pending">
            <div className={style.tabContent}>
              <div className={style.userInfoBar}>
                <div className={style.userInfo}>
                  <UserOutline className={style.userIcon} />
                  <span className={style.userName}>王小柯</span>
                  <span className={style.userId}>2015****10</span>
                </div>
                <div className={style.switchButton}>
                  <UserOutline className={style.switchIcon} />
                  <span>切换</span>
                </div>
              </div>
              <div className={style.orderList}>
                {getFilteredOrders('pending').map(order => (
                  <Card key={order.id} className={style.orderCard}>
                    <div className={style.orderHeader}>
                      <div className={style.orderService}>{order.service}</div>
                      <div className={`${style.orderStatus} ${getStatusClassName(order.status)}`}>
                        {order.statusText}
                      </div>
                    </div>
                    <div className={style.orderDetails}>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请医院：</span>
                        <span className={style.detailValue}>{order.hospital}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请时间：</span>
                        <span className={style.detailValue}>{order.applyTime}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>开单金额：</span>
                        <span className={style.detailValue}>¥{order.amount.toFixed(2)}</span>
                      </div>
                    </div>
                    <div className={style.orderAction}>
                      {renderActionButton(order)}
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          </Tabs.Tab>
          
          <Tabs.Tab title="已审核" key="approved">
            <div className={style.tabContent}>
              <div className={style.userInfoBar}>
                <div className={style.userInfo}>
                  <UserOutline className={style.userIcon} />
                  <span className={style.userName}>王小柯</span>
                  <span className={style.userId}>2015****10</span>
                </div>
                <div className={style.switchButton}>
                  <UserOutline className={style.switchIcon} />
                  <span>切换</span>
                </div>
              </div>
              <div className={style.orderList}>
                {getFilteredOrders('approved').map(order => (
                  <Card key={order.id} className={style.orderCard}>
                    <div className={style.orderHeader}>
                      <div className={style.orderService}>{order.service}</div>
                      <div className={`${style.orderStatus} ${getStatusClassName(order.status)}`}>
                        {order.statusText}
                      </div>
                    </div>
                    <div className={style.orderDetails}>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请医院：</span>
                        <span className={style.detailValue}>{order.hospital}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请时间：</span>
                        <span className={style.detailValue}>{order.applyTime}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>开单金额：</span>
                        <span className={style.detailValue}>¥{order.amount.toFixed(2)}</span>
                      </div>
                    </div>
                    <div className={style.orderAction}>
                      {renderActionButton(order)}
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          </Tabs.Tab>
          
          <Tabs.Tab title="已取消" key="cancelled">
            <div className={style.tabContent}>
              <div className={style.userInfoBar}>
                <div className={style.userInfo}>
                  <UserOutline className={style.userIcon} />
                  <span className={style.userName}>王小柯</span>
                  <span className={style.userId}>2015****10</span>
                </div>
                <div className={style.switchButton}>
                  <UserOutline className={style.switchIcon} />
                  <span>切换</span>
                </div>
              </div>
              <div className={style.orderList}>
                {getFilteredOrders('cancelled').map(order => (
                  <Card key={order.id} className={style.orderCard}>
                    <div className={style.orderHeader}>
                      <div className={style.orderService}>{order.service}</div>
                      <div className={`${style.orderStatus} ${getStatusClassName(order.status)}`}>
                        {order.statusText}
                      </div>
                    </div>
                    <div className={style.orderDetails}>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请医院：</span>
                        <span className={style.detailValue}>{order.hospital}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>申请时间：</span>
                        <span className={style.detailValue}>{order.applyTime}</span>
                      </div>
                      <div className={style.orderDetailItem}>
                        <span className={style.detailLabel}>开单金额：</span>
                        <span className={style.detailValue}>¥{order.amount.toFixed(2)}</span>
                      </div>
                    </div>
                    <div className={style.orderAction}>
                      {renderActionButton(order)}
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          </Tabs.Tab>
        </Tabs>
        </div>
    </div>
  )
}

export default Index
